 <template>
	 <view >
		 
		 <!-- 模糊查找 -->
		 	<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入物料名称" clearButton="auto" bgColor="#ffffff"
		 		cancelButton="auto" @input="input" />
		 
		<view class="new-file">
		<!-- 第一种方法 -->
		<!-- 头部选项卡 -->
			<view class="head-nav" v-if="!show">
				<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">待审批</view>
				<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">已同意</view>
				<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">已驳回</view>
			</view>
			<!-- 内容切换 -->
			<view class="content" v-if="navIndex==1">
			  <view class="container">
			     <!-- 正文内容 -->  
			  	   <view class="content2">
			  		   <view   v-for="(item,index) in dataList" :key="index">
			  		   <view class="item">
			  				 <view class="item-content" @click="myApply(item.purchasingmaterialsid)">
			  					  <view class="item-content-item">
			  						  {{item.applicationtime}}  
			  						  <view style=" margin-left: 25%; " >{{item.departmentapproval}}</view>
			  					  </view>
			  					  <view class="item-content-item">
			  						  <view class="item-content-item-left">物料:</view>
			  						  <view class="item-content-item-right">
			  							  {{item.materialname}}
			  						  </view>
			  					  </view>
			  					  <view class="item-content-item">
			  						  <view class="item-content-item-left">单号:</view>
			  						  <view class="item-content-item-right">
			  							  {{item.workordernumber}}
			  						  </view>
			  					  </view>
			  				 </view>
			  			 </view>
			  		  </view>
						 <!--   数据 为空  -->
						 <template v-if="empty==0">
							<u-empty
								textSize = '15'
								mode = "data"
								icon = "http://121.5.128.59:9000/picture/cbbd3de693b44e84afe2593f449acbb6.png"
							>
							</u-empty>
						 </template>
			  		</view>	
			  </view>
			</view>
			<view class="content" v-if="navIndex==2">
				<view class="container">
				   <!-- 正文内容 -->  
					   <view class="content2">
						   <view   v-for="(item,index) in dataList" :key="index">
						   <view class="item">
								 <view class="item-content" @click="myApply(item.purchasingmaterialsid)">
									  <view class="item-content-item">
										  {{item.applicationtime}}  
										  <view style=" margin-left: 25%; " >{{item.departmentapproval}}</view>
									  </view>
									  <view class="item-content-item">
										  <view class="item-content-item-left">物料:</view>
										  <view class="item-content-item-right">
											  {{item.materialname}}
										  </view>
									  </view>
									  <view class="item-content-item">
										  <view class="item-content-item-left">单号:</view>
										  <view class="item-content-item-right">
											  {{item.workordernumber}}
										  </view>
									  </view>
								 </view>
							 </view>
						  </view>
							 <!--   数据 为空  -->
							 <template v-if="empty==0">
								<u-empty
									textSize = '15'
									mode = "data"
									icon = "http://121.5.128.59:9000/picture/cbbd3de693b44e84afe2593f449acbb6.png"
								>
								</u-empty>
							 </template>
						</view>	
				</view>
			  
			</view>
			<view class="content" v-if="navIndex==3">
				<view class="container">
				   <!-- 正文内容 -->  
					   <view class="content2">
						   <view   v-for="(item,index) in dataList" :key="index">
						   <view class="item">
								 <view class="item-content" @click="myApply(item.purchasingmaterialsid)">
									  <view class="item-content-item">
										  {{item.applicationtime}}  
										  <view style=" margin-left: 25%; " >{{item.departmentapproval}}</view>
									  </view>
									  <view class="item-content-item">
										  <view class="item-content-item-left">物料:</view>
										  <view class="item-content-item-right">
											  {{item.materialname}}
										  </view>
									  </view>
									  <view class="item-content-item">
										  <view class="item-content-item-left">单号:</view>
										  <view class="item-content-item-right">
											  {{item.workordernumber}}
										  </view>
									  </view>
								 </view>
							 </view>
						  </view>
							 <!--   数据 为空  -->
							 <template v-if="empty == 0">
								<u-empty
									textSize = '15'
									mode = "data"
									icon = "https://cdnjson.com/images/2023/10/17/cbbd3de693b44e84afe2593f449acbb6.png"
								>
								</u-empty>
							 </template>
						</view>	
				</view>
			</view>
		</view> 
		<u-gap height="20px" bgColor="#ffffff "></u-gap>
	</view>
 </template>
<script>
  export default{
    data(){
      return{
		search:'',
		show: false,
		  
        navIndex:1,
        listIndex:0,
		dataList:[],
		empty:0,
      }
    },
	onLoad() { 
		this.dataList = []
		uni.request({
			url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findMaterialApprovalByDepartment",
			method: 'GET',
			data:{
				departmentapproval: '待审批'
			},
			header: {
				"Content-Type": "application/json" //请求头信息
			},
			success: (res) => {
				
				if (res.data.data.length != 0) {
					this.empty = 1
					for (var i = 0; i < res.data.data.length; i++) {
						this.dataList.push(res.data.data[i])
					}
				} else{
					this.empty = 0
				}
				
			}
		})
	},
	onShow() {},
	onUnload() {  //监听页面卸载
		uni.switchTab({
			url: '/pages/adminVue/my'
		})
	},
    methods:{
		
		// 搜索
		input(e) {
			// 清除 timer 对应的延时器
			clearTimeout(this.timer)
			// 重新启动一个延时器，并把 timerId 赋值给 this.timer
			this.timer = setTimeout(() => {
				// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
				this.search = e; // 获取输入的搜索关键字
				console.log("--搜索---",this.search)
				if (this.search == '' || this.search == null) {
					this.show = false
					this.dataList = []
					uni.request({
						url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findMaterialApprovalByDepartment",
						method: 'GET',
						data:{
							departmentapproval: '待审批'
						},
						header: {
							"Content-Type": "application/json" //请求头信息
						},
						success: (res) => {
							
							if (res.data.data.length != 0) {
								this.empty = 1
								for (var i = 0; i < res.data.data.length; i++) {
									this.dataList.push(res.data.data[i])
								}
							} else{
								this.empty = 0
							}
							
						}
					})

				} else{
					this.show = true
					this.dataList = []
					this.navIndex = 1
					uni.request({
						method: 'GET',
						url:'https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findMateriaBymaterialName',
						data:{ materialName: this.search},
						success: (res) => {
							if (res.data.data.length != 0) {
								this.empty = 1
								for (var i = 0; i < res.data.data.length; i++) {
									this.dataList.push(res.data.data[i])
								}
							} else{
								this.empty = 0
							}
							
						}
					})
					
				}

			}, 1000)
		},
		
		
		// 详情 页 
		myApply(purchasingmaterialsid){
			console.log("我的设备详情  id ",purchasingmaterialsid)
			let purchasingmaterialsid2 = purchasingmaterialsid
		    let	data2 = { msg: purchasingmaterialsid2 } 
			uni.navigateTo({
				url: '/pages/adminVue/ExamineApprove?data='+encodeURIComponent(JSON.stringify(data2))
			})
		},
		//  选项框 点击事件
      checkIndex(index){
        this.navIndex =index;
		switch (index){
			case 1:
				this.dataList = []
				uni.request({
					url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findMaterialApprovalByDepartment",
					method: 'GET',
					data:{
						departmentapproval: '待审批'
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => {
						if (res.data.data.length != 0) {
							this.empty = 1
							for (var i = 0; i < res.data.data.length; i++) {
								this.dataList.push(res.data.data[i])
							}
						} else{
							this.empty = 0
						}
					}
				})
				break;
			case 2:
				this.dataList = []
				uni.request({
					url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findMaterialApprovalByDepartment",
					method: 'GET',
					data:{
						departmentapproval: '已通过'
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => {
						if (res.data.data.length != 0) {
							this.empty = 1
							for (var i = 0; i < res.data.data.length; i++) {
								this.dataList.push(res.data.data[i])
							}
						} else{
							this.empty = 0
						}
					}
				})
				break;
			case 3:
				this.dataList = []
				uni.request({
					url: "https://www.smacaftersales.com:443/afterSalesPurchasingMaterials/afterSalesPurchasingMaterials/findMaterialApprovalByDepartment",
					method: 'GET',
					data:{
						departmentapproval: '已驳回'
					},
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					success: (res) => {
						if (res.data.data.length != 0) {
							this.empty = 1
							for (var i = 0; i < res.data.data.length; i++) {
								this.dataList.push(res.data.data[i])
							}
						} else{
							this.empty = 0
						}
					}
				})
				break;
		}
		
      },
      
      
    }
  }
</script>
<style>
	/* 页面背景 */
	page {
		background-color: #f8f8f8;
	}
</style>

<style scoped lang="scss">
	.container{
			display: flex;
			flex-direction: column;
			height: calc(100vh - var(--window-top));
			width: 100%;
			.slot-wrap{
				display: flex;
				align-items: center;
				flex: 1;
				.search-wrap{
					margin: 0 20rpx;
					flex: 1;
				}
			}
			.content2{
				flex:1;
				.item{
					height: 200rpx;
					margin-left: 49rpx;
					margin-top:15rpx;
					margin-right:49rpx;
					border-radius: 15rpx;
					background-color:#FFFF;
					.item-top{
						padding-left: 52rpx;
						padding-right: 52rpx;
						padding-top: 48rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.item-top-left{
							font-size: 44rpx;
						}
						.item-top-right {
							font-size: 44rpx;
						}
					}
					.item-content{
						height: 200rpx;
						border-bottom:1rpx solid #e8e8e8 ;
						background-color: #FFFFFF;
						.item-content-item{
							color: #777777;
							padding-left: 52rpx;
							padding-top: 20rpx;
							font-size:32rpx ;
							display:flex;
							flex-direction: row;
							.item-content-item-left{
								color:#8b8b8b;
								padding-right: 35rpx;
							}
							.item-content-item-right{
								color:#1b286e;
							}
						}
						
					}
					.item-btn{
						height: 30rpx;
						font-size: 36rpx;
						padding-top: 20rpx;
						padding-left: 52rpx;
						background-color: #FFFFFF;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.item-btn-right{
							width: 20px;
							height: 20px;
							margin-right: 50rpx;
							color:#e8e8e8;
						}
					}
				}
			}
		}
	/* /// */
  .head-nav{
    width: 50%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #0065d9;
	color: #0065d9;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }
  .box{background: #008000;}
</style>